<template>
	<el-container>
		<el-header class='x-header'>
			<b class="title">{{ page_info.title }}</b>
			<el-button v-if="$route.query.callback_url" size="mini" icon="el-icon-back" @click="g_page.funcBack">
				返回
			</el-button>
			<el-button size="mini" type="success" icon="el-icon-edit" @click="g_page.funcRedirectEdit(`app_car__day__h__edit`)">
				批量操作
			</el-button>
			<el-button size="mini" icon="el-icon-refresh" @click="g_page.funcReload()">刷新</el-button>
		</el-header>
		<el-main class='x-main'>
			<el-form :inline="true" :model="form_q" size="mini">
				<el-form-item label="月份">
					<el-date-picker
						v-model="form_q.compMonth"
						type="month"
						value-format="yyyy-MM"
						placeholder="选择月" @change="g_page.funcGetList">
					</el-date-picker>
				</el-form-item>
			</el-form>
			<el-calendar v-model="form_q.compMonth" @click="funcGo">
				<template slot="dateCell" slot-scope="{date, data}">
					<!---->
					<!---->
					<div v-if="data.type=='current-month'" class="diy_item">
						<div class="diy_item_date">{{ data.day.split('-').slice(1).join('-') }}</div>
						<div v-if="funcDayExist(data.day)">
							<div class="diy_item_inside">
								<span v-if="list_data[data.day].sday_desc!==''">{{ list_data[data.day].sday_desc }}</span>
								<span v-else>节假日</span>
							</div>
						</div>
						<div v-else class="diy_item_inside color_gray">

						</div>
					</div>
					<div v-else>

					</div>
					<!---->
					<!---->
				</template>
			</el-calendar>
			<div class="table-wrap">
			</div>
		</el-main>
		<!---->
		<!---->
		<!-- 弹框 -->
		<el-dialog :title="form.app_idx+'配置'" :visible.sync="form_dialog_visible" width="70%">
			<el-form ref="form" :rules="form_rules" :model="form" size="mini" label-width="15%">
				<el-form-item label="入口链接" v-if="!g_page.funcIsAdminAdd()">
					<el-input :disabled="true" v-model="form.oauth_url"/>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="g_page.funcBack" size="mini">取消</el-button>
				<el-button type="success" @click="g_page.funcSave" size="mini">保存</el-button>
			</div>
		</el-dialog>
		<!---->
		<!---->
		<!---->
	</el-container>
</template>


<script>
	export default {
		data() {
			let page_data = { xx: '' }
			//
			page_data = this.g_cc.funcGetInitData(page_data)
			//
			return page_data
		},
		mounted() {
			console.log('mounted')
			//
			this.g_page.funcSetVue(this)
			// 应用ID
			this.g_page.funcSetApiUrlList('/xadmin/app_car/app_car__day__h__list')
			this.g_page.funcSetApiUrlDel('/xadmin/app_car/app_car__day__h__list/del')
			//页码
			this.g_page.funcSetPageSize(20)
			//搜索
			this.form_q = {
				'compKw': ''
			}
			this.g_page.funcGetList()
			//
			this.form_rules = {
				acc_uidX: [
					{
						required: true,
						message: '必填',
						trigger: 'blur'
					}
				]
			}
			//
		},
		methods: {
			////////////////////
			funcGo(e) {
				console.log('funcGo', e)
				return
			},
			//日期是否已设置
			funcDayExist(day) {
				let exist = false
				if (typeof (this.list_data[day]) != 'undefined') {
					exist = this.list_data[day].exist
				}
				return exist
			}
		}
	}
</script>

<style>
	.el-calendar-table:not(.is-range) td.next, .el-calendar-table:not(.is-range) td.prev {
		pointer-events: none;
	}

	.el-calendar__button-group {
		display: none;
	}

	.el-calendar-table .el-calendar-day {
		padding: 0 !important;
	}

	.diy_item {
		position: relative;
		box-sizing: border-box;
		width: 100%;
		height: 100%;
		padding: 10px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.diy_item_date {
		position: absolute;
		left: 10px;
		top: 10px;
		font-size: 14px;
	}

	.diy_item_inside {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.color_gray {
		color: gray;
	}

</style>


